<!DOCTYPE html>

<head>
  <div id="app">
    <ul>
      <li tabindex='1'>foo</li>
      <li tabindex='1'>bar</li>
      <li tabindex='1'>baz</li>
    </ul>
  </div>
</head>

<style>
  ul,
  li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  ul {
    border: 5px solid #999;
    font-size: 0;
  }

  li {
    padding: 25px;
    font-size: 1rem;
    border: 5px solid orange;
    display: inline-block;
  }

  li:focus {
    margin-bottom: -5px;
    padding-bottom: 30px;
  }
</style>